import React, { useEffect, useState } from 'react';
import DragItem from './DragItem';
import './index.modules.scss';
import { CaretRightOutlined } from '@ant-design/icons';

// interface TreeNode {
// 	title: string;
// 	key: string;
// 	children?: Array<TreeNode>;
// }

interface TreeProps {
	data: Array<any>;
	setCurrentResult: any;
	icon: ( item: any ) => any;
	expandedKeys: any;
	onExpand: any;
}

interface IProps {
	data: any;
	isRoot?: boolean;
	icon: ( item: any ) => any;
	setCurrentResult: any;
	expandedKeys: any;
	onExpand: any;
}

const TreeNode = ( props: IProps ) => {
	const { children, title: name, key } = props.data;
	const hasChildren = children && children.length > 0;
	const [ expanded, setExpanded ] = useState( false );

	const handleClick = ( e ) => {
		e.stopPropagation();
		const value = !expanded;
		setExpanded( value );
		props.onExpand( {
			key,
			value,
		} );
	};

	useEffect( () => {
		if ( ~props.expandedKeys.indexOf( key ) ) {
			setExpanded( true );
		} else {
			setExpanded( false );
		}
	}, [ props.expandedKeys, key ] );

	return (
		<div className="drag_tree_node" title={name} style={{ paddingLeft: props.isRoot ? 0 : 24 }} onClick={( e ) => handleClick( e )}>
			{/*<span className="arrow_icon">*/}
			{/*	{hasChildren && <span className={`iconfont ${expanded ? 'bdhxiajiantou' : 'bdhyoujiantou'}`}></span>}*/}
			{/*</span>*/}
			<span className="arrow_icon">
				{hasChildren && <CaretRightOutlined style={ { transition: 'transform 0.3s', transform: `rotate(${ expanded ? '90deg' : '0deg' })` }}/> }
			</span>
			<span className="tree_node_content">
				<span className="tree_node_content_icon">{props.icon( props.data )}</span>
				<span>{name}</span>
			</span>
			{hasChildren && expanded && (
				<>
					{children.map( ( item ) => {
						return (
							<DragItem key={item.id} name={name} id={key} handlePush={props.setCurrentResult} dragItem={ item }>
								<TreeNode icon={props.icon} 
									setCurrentResult={props.setCurrentResult} 
									key={item.id} 
									data={item}
									expandedKeys={ props.expandedKeys }
									onExpand={ props.onExpand }
								></TreeNode>
							</DragItem>
						);
					} )}
				</>
			)}
		</div>
	);
};

const Tree = ( props: TreeProps ) => {
	const { data, setCurrentResult, icon } = props;

	const onExpand = ( data ) => {
		const idx = props.expandedKeys.indexOf( data.key );
		// console.log( '-- onExpand ---', idx, data );
		if ( data.value ) {
			if ( idx === -1 ) {
				props.onExpand( [ ...props.expandedKeys, data.key ] );
			}
		} else if ( idx > -1 ) {
			let expandedKeys = props.expandedKeys.slice(); //拷贝数组
			expandedKeys.splice( idx, 1 );
			// console.log( '-- expandedKeys ---', expandedKeys );
			props.onExpand( expandedKeys );
		}
	};

	return (
		<div className="tree">
			{data && (
				<>
					{data.map( ( item ) => {
						return <TreeNode isRoot 
							setCurrentResult={setCurrentResult} 
							icon={icon} 
							key={item.key} 
							data={item}
							expandedKeys={ props.expandedKeys }
							onExpand={ onExpand }
						></TreeNode>;
					} )}
				</>
			)}
		</div>
	);
};

export default React.memo( Tree );
